import React, { memo, useState } from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity, useColorScheme } from 'react-native';
import { NavigationProp } from '@react-navigation/native';
import { ListItem } from '../Pages/WaterFallListScreen'; // 引入统一的 ListItem 类型

interface NoteCardProps {
  data: {
    itemData: ListItem; // 使用统一的 ListItem 类型
    columnIndex: 0 | 1;
  };
  navigation: NavigationProp<any>; // 可根据实际导航类型替换 `any`
}

const NoteCard: React.FC<NoteCardProps> = ({ data, navigation }) => {
  const { itemData, columnIndex } = data;
  const [mainImageError, setMainImageError] = useState(false);
  const colorScheme = useColorScheme();
  const isDarkMode = colorScheme === 'dark';

  const alignStyles: Record<0 | 1, 'flex-start' | 'flex-end'> = {
    0: 'flex-start',
    1: 'flex-end',
  };

  const RouteToDetail = (id: number) => () => {
    navigation.navigate('NoteDetailScreen', { id }); // 传递 id 参数
  };

  return (
    <TouchableOpacity onPress={RouteToDetail(itemData.id)} activeOpacity={0.5}>
      <View style={[styles.alignContainer, { alignItems: alignStyles[columnIndex] }]}>
        <View style={[styles.container, { backgroundColor: isDarkMode ? '#1E1E1E' : '#fff' }]}>
          {mainImageError ? (
            <View style={[styles.error, { backgroundColor: isDarkMode ? '#333333' : '#f0f0f0' }]}>
              <Text style={[styles.errorText, { color: isDarkMode ? '#AAAAAA' : '#999' }]}>Image not available</Text>
            </View>
          ) : (
            <View
              style={{
                height: itemData.height,
              }}>
              <Image
                source={{ uri: itemData.imageUrl }}
                style={styles.cardImage}
                resizeMode="cover"
                onError={(error) => {
                  setMainImageError(true);
                  console.log(error);
                }}
              />
            </View>
          )}
          <Text style={[styles.cardTitle, { color: isDarkMode ? '#FFFFFF' : '#000000' }]}>{itemData.title}</Text>
          <Text style={[styles.cardSubtitle, { color: isDarkMode ? '#AAAAAA' : '#666' }]}>{itemData.subtitle}</Text>
          <View style={styles.cardFooter}>
            <Text style={[styles.cardAuthor, { color: isDarkMode ? '#AAAAAA' : '#999' }]}>{itemData.author}</Text>
            <Text style={[styles.cardViews, { color: isDarkMode ? '#AAAAAA' : '#999' }]}>{itemData.views} views</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  alignContainer: {
    width: '100%',
    marginBottom: 10,
    paddingHorizontal: 5,
    justifyContent: 'space-between',
  },
  container: {
    width: '100%',
    height: '100%',
    borderRadius: 16,
    overflow: 'hidden',
  },
  cardImage: {
    width: '100%',
    height: '100%',
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    padding: 10,
  },
  cardSubtitle: {
    fontSize: 14,
    paddingHorizontal: 10,
  },
  cardFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
  },
  cardAuthor: {
    fontSize: 12,
  },
  cardViews: {
    fontSize: 12,
  },
  error: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  errorText: {
    fontSize: 16,
  },
});

export default memo(NoteCard);
